<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品表</title>
</head>
<body>
<table border="1px">
    <caption>商品表</caption>
    <tr>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    let productsArr = [
        {title: '小米14', price: 8000, num: 500},
        {title: '苹果16', price: 10000, num: 400},
        {title: '魅族60', price: 2000, num: 600},
        {title: '华为70', price: 6700, num: 900}
    ]

    for (let i = 0; i < productsArr.length; i++) {
        var trE = document.createElement('tr')
        var td1E = document.createElement('td')
        var td2E = document.createElement('td')
        var td3E = document.createElement('td')
        var tableE = document.querySelector('table')
        td1E.innerHTML = productsArr[i].title
        td2E.innerHTML = productsArr[i].price
        td3E.innerHTML = productsArr[i].num

        trE.append(td1E, td2E, td3E)
        tableE.append(trE)
    }

    //定义一个js对象
    let f1 = {
        name: '张三',
        age: 18,
        say: function () {
            console.log(`我是${this.name},今年${this.age}岁了`)
        }
    }
    f1.say()
    console.log(f1.name, f1.age)

    let f2 = {}
    f2.name = '李四'
    f2.age = 19
    f2.say = function () {
        console.log(`我是${this.name},今年${this.age}岁了`)
    }
    f2.say()
    console.log(f2.name, f2.age)

</script>
</body>
</html>